<template>
  <div class="page has-navbar" v-nav="{ title: '编辑地址', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
    <div class="page-content text-center">
      <list>
        <div class="list-item" v-for="(address , index) in addressMsg" :key="index">
          <p class="address">{{address.address}}</p>
          <p>{{address.name}}（{{address.sex}}）{{address.phone}}</p>
          <i class="icon ion-edit" @click="editAddress(index)"></i>
        </div>
      </list>
    </div>
    <div class="addAddress" @click="addAddress">新增地址</div>
  </div>
</template>

<script>
    export default {
      name: "Address",
      data(){
        return{
          addressMsg : [
            {
              id : '0',
              address : '四川大学锦城学院8号宿舍201室',
              name : '周',
              sex : '先生',
              phone : '138 0013 8000',
              floorNumber : ''
            },
            {
              id : '1',
              address : '四川省成都市武侯区天益街38号',
              name : '李',
              sex : '女士',
              phone : '157 2308 5006',
              floorNumber : ''
            },
          ]
        }
      },
      methods : {
        back(){
          this.$router.go(-1)
        },
        menu(){

        },
        editAddress(index){
          let sendAMsg = this.addressMsg[parseInt(index)];
          this.$router.push({
            path : '/editAddress',
            query : {
              sendAMsg : sendAMsg
            }
          });
        },
        addAddress(){
          this.$router.push('/editAddress')
        }
      }
    }
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
  text-align: start;
}
.list-item{
  padding: 15px;
  position: relative;
  border-bottom: 1px solid #cccccc;
  p{
    color: #999999;
    font-size: 14px;
    margin: 5px 0;
  }
  p.address{
    color: #333333;
    font-size: 18px;
  }
  .icon{
    position: absolute;
    top: calc(50% - 9px);
    right: 15px;
    font-size: 18px;
    color: #ef2b67;
  }
}
.addAddress{
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  line-height: 50px;
  text-align: center;
  background: #ef2b67;
  color: #ffffff;
  width: 100%;
}
</style>
